import { Input, List } from "antd"
import { useState,useDeferredValue } from "react"
// @ts-ignore
import mockjs from 'mockjs'

interface Item {
  id: number
  name: string,
  address: string
}

export default function deferredValue() {

  const [val, setVal] = useState('')

  const [list] = useState<Item[]>(() => {
    return mockjs.mock({
      'list|10': [{
        'id|+1': 1,
        name: '@natural',
        address: '@county(true)'
      }]
    }).list
  })

  const deferredQuery = useDeferredValue(val)

  const isStale = deferredQuery !== val

  const findItem = () => {
    console.log(deferredQuery);
    console.log(val);
    
    
    return list.filter(item => item.name.toString().includes(deferredQuery))
  }

  return (
    <>
      <h1>useDeferredValue</h1>
      <Input value={val} onChange={(e) => {
        setVal(e.target.value)
      }} />
      <List style={{opacity: isStale ? 0.5 : 1, transition: 'opacity 0.5s ease-in-out'}} renderItem={item => <List.Item>
        <List.Item.Meta title={item.name} description={item.address} />
      </List.Item>} dataSource={findItem()}>

      </List>
    </>
  )
}